<template>
  <div v-if="songList.length">
    <div class="card card-side bg-base-100 shadow-xl">
      <figure>
        <img :src="playlistDetail.playlist.coverImgUrl" alt="Movie" />
      </figure>
      <div class="card-body">
        <h3 class="card-title">
          {{ playlistDetail.playlist.name }}
        </h3>
        <div>
          标签：
          <div
            v-for="item in playlistDetail.playlist.tags"
            :key="item"
            class="badge badge-outline mr-2"
          >
            {{ item }}
          </div>
        </div>
        <p>简介：{{ playlistDetail.playlist.description }}</p>
      </div>
    </div>

    <kbd class="kbd kbd-lg mt-9 mb-28">歌曲列表</kbd>
    <span class="ml-5">{{ songList.length }}首歌</span>
    <div class="-translate-y-20">
      <detail-list :songList="songList"></detail-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, toRefs } from "vue";

import detailList from "../../../components/list/list.vue";
import { useSongPlayStore } from "../../../store/songPlay";
type Q = {
  id?: string;
};
type Query = {
  query: Q;
};
const { query }: Query = useRoute();
const { actionPlayListDetail, actionSongList, songList, playlistDetail } = toRefs(
  useSongPlayStore()
);
onMounted(() => {
  actionPlayListDetail.value(query.id || '');
  actionSongList.value(query.id || '');
});
</script>

<style scoped></style>
